<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试页面</title>
    <!-- 引入调试控制台 -->
    <script src="./eruda.min.js"></script>
    <script>eruda.init();</script>
  </head>
  <body>
    <h2>测试用网页</h2>
    <button id="testEvent">测试事件</button>
    <!-- 按钮2,清空用户数据 -->
    <button id="getUserData">获取用户数据</button>
    <button id="clearData">清空用户数据</button>
    <button id="pickerPhoto">调用相册</button>
    <button id="pickerCamera">调用相机</button>
    <button id="vibrator">调用传感器</button>
    <button id="getAreaColumns">获取省市区</button>

    <p></p>
    <img id="photoDisplay" style="width: 200px; height: 200px; object-fit: cover; display: none;">
    <script>
      document.querySelector('#testEvent').addEventListener('click', async () => {
        // mk.sayHi('114514')
        mk.ppt('我是sb')
        console.log(window.mk);
      })
      document.querySelector('#getUserData').addEventListener('click', async () => {
        const userData = await mk.queryUser()
        document.querySelector('p').innerHTML = JSON.stringify(userData)
      })
      document.querySelector('#clearData').addEventListener('click', async () => {
        mk.removeUser()
      })
      //图片返回值为base64的图片编码
      document.querySelector('#pickerPhoto').addEventListener('click', async () => {
        const photo = await mk.pickerPhoto()
        const img = document.querySelector('#photoDisplay')
        img.src = `data:image/jpeg;base64,${photo}`
        img.style.display = 'block'
        document.querySelector('p').innerHTML = ''
      })
      document.querySelector('#pickerCamera').addEventListener('click', async () => {
        const photo = await mk.pickerCamera()
        const img = document.querySelector('#photoDisplay')
        img.src = `data:image/jpeg;base64,${photo}`
        img.style.display = 'block'
      })

      // 传感器 mk.vibrator
      const vibrator = document.querySelector("#vibrator");
      vibrator.addEventListener("click", async () => {
        mk.vibrator();
      });

      // 省市区数据 mk.getAreaColumns
      const getAreaColumns = document.querySelector("#getAreaColumns");
      getAreaColumns.addEventListener("click", async () => {
        const res = await mk.getAreaColumns();
        console.log(res);
      });
      
    </script>
  </body>
</html>
